<template>
  <div class="AirSys" @mousemove="handleMouseMove" @click="clickThisArea">
    <div class="top">
      <span :style="lPackValveStyle" style="margin-left: 65px; margin-top: 20px" class="disc_font"
        >L&nbsp;PACK</span
      >
      <span :style="lTrimValveStyle" style="margin-top: 35px; margin-left: 150px" class="disc_font"
        >L</span
      >
      <span style="margin-top: 35px; margin-left: 25px; line-height: 1" class="disc_font"
        >TRIM<br />AIR</span
      >
      <span
        :style="rTrimValveStyle"
        style="margin-top: 40px; margin-left: 15px; line-height: 1"
        class="disc_font"
        >R</span
      >
      <span
        :style="rPackValveStyle"
        style="margin-top: 25px; margin-left: 155px; line-height: 1"
        class="disc_font"
        >R&nbsp;PACK</span
      >
    </div>
    <div class="header">
      <span style="margin-left: 40px" class="disc_font">DUCT&nbsp;PRESS</span>
      <div style="margin-left: -70px; margin-top: 25px" class="duct_box">33</div>
      <span :style="lIslnValveStyle" style="margin-left: 108px" class="disc_font">L</span>
      <span style="margin-left: 25px" class="disc_font">ISLN</span>
      <span :style="cIslnValveStyle" style="margin-left: 30px" class="disc_font">C</span>
      <span style="margin-left: 25px" class="disc_font">ISLN</span>
      <span :style="rIslnValveStyle" style="margin-left: 32px" class="disc_font">R</span>
      <span style="margin-left: 80px" class="disc_font">DUCT&nbsp;PRESS</span>
      <div style="margin-left: -70px; margin-top: 25px" class="duct_box">32</div>
    </div>
    <div class="header_lower">
      <span :style="lWaiStyle" style="margin-left: 25px; margin-top: 5px" class="disc_font"
        >WAI</span
      >
      <span
        :style="c1AirHydStyle"
        class="disc_font"
        style="margin-left: 132px; line-height: 0.8; text-align: center"
        >AIR&nbsp;C1<br />HYD</span
      >
      <span
        class="disc_font"
        :style="c2AirHydStyle"
        style="margin-left: 185px; line-height: 0.8; text-align: center; margin-top: 20px"
        >AIR&nbsp;C2<br />HYD</span
      >
      <span
        class="disc_font"
        :style="rWaiStyle"
        style="margin-left: 110px; line-height: 0.8; text-align: center; margin-top: 15px"
        >WAI</span
      >
    </div>
    <div class="footer">
      <span :style="lEaiStyle" style="margin-left: 20px; margin-top: 5px" class="disc_font"
        >EAI</span
      >
      <span :style="apuStyle" style="margin-left: 255px; margin-top: -15px" class="disc_font"
        >APU</span
      >
      <span :style="rEaiStyle" style="margin-left: 260px; margin-top: 5px" class="disc_font"
        >EAI</span
      >
    </div>
    <div class="footer_lower">
      <span :style="lEngStyle" style="margin-left: 46px; margin-top: 20px" class="disc_font"
        >L&nbsp;ENG</span
      >
      <span
        :style="lStartStyle"
        style="margin-top: 28px; margin-left: 8px; font-size: 18px"
        class="disc_font"
        >START</span
      >
      <span style="margin-top: 20px; margin-left: 114px" class="disc_font">APU</span>
      <span
        :style="apuStartStyle"
        class="disc_font"
        style="margin-top: -38px; margin-left: 65px; font-size: 18px"
        >START</span
      >
      <span
        :style="rStartStyle"
        class="disc_font"
        style="font-size: 18px; margin-top: 28px; margin-left: 70px"
        >START</span
      >
      <span :style="rEngStyle" class="disc_font" style="margin-top: 20px; margin-left: 9px"
        >R&nbsp;ENG</span
      >
    </div>
    <canvas id="canvasc" width="634" height="340" ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, computed, watch, reactive } from 'vue'
const canvasRef = ref(null)

import { useStore } from 'vuex'

const store = useStore()

const apuBleedValve = computed(() => store.state.preumatic.apuBleedValve)
const engine1BleedValve = computed(() => store.state.preumatic.engine1BleedValve)
const engine2BleedValve = computed(() => store.state.preumatic.engine2BleedValve)
const cIslnValve = computed(() => store.state.preumatic.cIslnValve)
const lIslnValve = computed(() => store.state.preumatic.lIslnValve)
const rIslnValve = computed(() => store.state.preumatic.rIslnValve)
const lWingAnticeIceValve = computed(() => store.state.preumatic.lWingAnticeIceValve)
const rWingAnticeIceValve = computed(() => store.state.preumatic.rWingAnticeIceValve)
const engine1AnticeValve = computed(() => store.state.preumatic.engine1AnticeValve)
const engine2AnticeValve = computed(() => store.state.preumatic.engine2AnticeValve)
const c1AirHydBleedValve = computed(() => store.state.preumatic.c1AirHydBleedValve)
const c2AirHydBleedValve = computed(() => store.state.preumatic.c2AirHydBleedValve)
const lPackValve = computed(() => store.state.preumatic.lPackValve)
const rPackValve = computed(() => store.state.preumatic.rPackValve)
const lTrimValve = computed(() => store.state.preumatic.lTrimValve)
const rTrimValve = computed(() => store.state.preumatic.rTrimValve)
const engine1Run = computed(() => store.getters['engine/engine1Run'])
const engine2Run = computed(() => store.getters['engine/engine2Run'])
const apuRun = computed(() => store.getters['engine/apuRun'])

const lPackValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rPackValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const lTrimValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rTrimValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const lIslnValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const cIslnValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rIslnValveStyle = reactive({
  color: 'rgb(8,214,255)'
})

const lEaiStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rEaiStyle = reactive({
  color: 'rgb(8,214,255)'
})

const apuStyle = reactive({
  color: 'rgb(8,214,255)'
})

const apuStartStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rStartStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rEngStyle = reactive({
  color: 'rgb(8,214,255)'
})

const lEngStyle = reactive({
  color: 'rgb(8,214,255)'
})

const lStartStyle = reactive({
  color: 'rgb(8,214,255)'
})

const c1AirHydStyle = reactive({
  color: 'rgb(8,214,255)'
})

const c2AirHydStyle = reactive({
  color: 'rgb(8,214,255)'
})

const lWaiStyle = reactive({
  color: 'rgb(8,214,255)'
})

const rWaiStyle = reactive({
  color: 'rgb(8,214,255)'
})

watch(
  [
    apuBleedValve,
    engine1BleedValve,
    engine2BleedValve,
    cIslnValve,
    lIslnValve,
    rIslnValve,
    lWingAnticeIceValve,
    rWingAnticeIceValve,
    engine1AnticeValve,
    engine2AnticeValve,
    c1AirHydBleedValve,
    c2AirHydBleedValve,
    lPackValve,
    rPackValve,
    lTrimValve,
    rTrimValve,
    engine1Run,
    engine2Run,
    apuRun
  ],
  (newVal, oldVal) => {
    //根据监视的属性来决定执行什么方法
    newVal.forEach((val, index) => {
      const getterNames = [
        'apuBleedValve',
        'engine1BleedValve',
        'engine2BleedValve',
        'cIslnValve',
        'lIslnValve',
        'rIslnValve',
        'lWingAnticeIceValve',
        'rWingAnticeIceValve',
        'engine1AnticeValve',
        'engine2AnticeValve',
        'c1AirHydBleedValve',
        'c2AirHydBleedValve',
        'lPackValve',
        'rPackValve',
        'lTrimValve',
        'rTrimValve',
        'engine1Run',
        'engine2Run',
        'apuRun'
      ]

      const getterName = getterNames[index]
      const oldValForGetter = oldVal[index]
      const newValForGetter = newVal[index]
      if (newValForGetter !== oldValForGetter) {
        switch (getterName) {
          case 'apuBleedValve':
            drawApuValve()
            break
          case 'engine1BleedValve':
            //画1发引气活门
            engine1BleedCircle = drawCircle(
              69,
              268,
              canvas,
              engine1BleedValve.value ? 'ON' : 'OFF',
              engine1BleedCircle,
              'horizontal',
              'small'
            )
            break
          case 'engine2BleedValve':
            //画2发引气活门
            engine2BleedCircle = drawCircle(
              564,
              268,
              canvas,
              engine2BleedValve.value ? 'ON' : 'OFF',
              engine2BleedCircle,
              'horizontal',
              'small'
            )
            break
          case 'cIslnValve':
            //画中隔离活门
            cIslnCircle = drawCircle(
              320,
              123,
              canvas,
              cIslnValve.value ? 'ON' : 'OFF',
              cIslnCircle,
              'horizontal',
              'normal'
            )
            break
          case 'lIslnValve':
            //画左隔离活门
            lIslnCircle = drawCircle(
              220,
              123,
              canvas,
              lIslnValve.value ? 'ON' : 'OFF',
              lIslnCircle,
              'horizontal',
              'normal'
            )
            break
          case 'rIslnValve':
            //画右隔离活门
            rIslnCircle = drawCircle(
              420,
              123,
              canvas,
              rIslnValve.value ? 'ON' : 'OFF',
              rIslnCircle,
              'horizontal',
              'normal'
            )
            break
          case 'lWingAnticeIceValve':
            drawAntice()
            break
          case 'rWingAnticeIceValve':
            drawAntice()
            break
          case 'engine1AnticeValve':
            drawAntice()
            break
          case 'engine2AnticeValve':
            drawAntice()
            break
          case 'c1AirHydBleedValve':
            break
          case 'c2AirHydBleedValve':
            break
          case 'lPackValve':
            lPackRunWay = drawRunWay(154, 48, canvas, lPackRunWay, lPackValve.value)
            break
          case 'rPackValve':
            rPackRunWay = drawRunWay(474, 48, canvas, rPackRunWay, rPackValve.value)
            break
          case 'lTrimValve':
            //画左配平活门
            lTrimCircle = drawCircle(
              240,
              48,
              canvas,
              lTrimValve.value ? 'ON' : 'OFF',
              lTrimCircle,
              'vertical',
              'normal'
            )
            break
          case 'rTrimValve':
            //画右配平活门
            rTrimCircle = drawCircle(
              385,
              48,
              canvas,
              rTrimValve.value ? 'ON' : 'OFF',
              rTrimCircle,
              'vertical',
              'normal'
            )
            break
          case 'engine1Run':
            break
          case 'engine2Run':
            break
          case 'apuRun':
            drawCanvas()
            return
          default:
            break
        }
        drawPath()
      }
    })
  }
)

import {
  drawRunWay,
  drawTriangle,
  drawCircle,
  drawEngineBleedPath,
  drawLine,
  drawPackPath,
  drawLShape,
  drawVerticalLine,
  drawIslnLine,
  drawHorizontalLine
} from '../../../utils/fabricUtils'
import { Canvas } from 'fabric' // browser
import { ClickHandler, SystemType } from '../../../utils/clickHandlerUtils'
import { onMounted } from 'vue'

const clickAreas = [
  { x: 64, y: 270, width: 124, height: 38, name: 'lPackRunWay' },
  { x: 436, y: 270, width: 130, height: 38, name: 'rPackRunWay' },
  { x: 220, y: 270, width: 50, height: 38, name: 'lTrimCircle' },
  { x: 350, y: 270, width: 54, height: 38, name: 'rTrimCircle' },
  { x: 200, y: 339, width: 38, height: 54, name: 'lIslnCircle' },
  { x: 300, y: 339, width: 38, height: 54, name: 'cIslnCircle' },
  { x: 400, y: 339, width: 38, height: 54, name: 'rIslnCircle' },
  { x: 49, y: 496, width: 30, height: 30, name: 'engine1BleedCircle' },
  { x: 544, y: 496, width: 30, height: 30, name: 'engine2BleedCircle' },
  { x: 261, y: 429, width: 68, height: 38, name: 'apuBleedCircle' },
  { x: 101, y: 402, width: 30, height: 30, name: 'lWingAnticeCircle' },
  { x: 494, y: 402, width: 30, height: 30, name: 'rWingAnticeCircle' },
  { x: 4, y: 494, width: 26, height: 26, name: 'engine1AnticeCircle' },
  { x: 595, y: 494, width: 26, height: 26, name: 'engine2AnticeCircle' },
  { x: 101, y: 452, width: 30, height: 30, name: 'lStartValveCircle' },
  { x: 494, y: 452, width: 30, height: 30, name: 'rStartValveCircle' }
]
let clickHandler = null
let area = null

const drawApu = () => {
  const rect = new fabric.Rect({
    left: 254,
    top: 250,
    width: 45,
    height: 50,
    fill: 'black',
    stroke: apuRun.value ? 'rgb(8,255,66)' : 'white',
    strokeWidth: apuRun.value ? 3 : 2
  })
  canvas.add(rect)
}

onMounted(() => {
  //创建clickHandler
  clickHandler = new ClickHandler(SystemType.AIR, clickAreas)

  drawCanvas()
  drawPath()
})

const handleMouseMove = (event) => {
  let index = clickHandler.findClickedAreaIndex(event.clientX, event.clientY)
  if (index != -1) {
    document.body.style.cursor = 'pointer'
    switch (index) {
      case 0:
        lPackValveStyle.color = 'rgb(8,255,66)'
        area = 'lPackRunWay'
        break
      case 1:
        rPackValveStyle.color = 'rgb(8,255,66)'
        area = 'rPackRunWay'
        break
      case 2:
        lTrimValveStyle.color = 'rgb(8,255,66)'
        area = 'lTrimCircle'
        break
      case 3:
        rTrimValveStyle.color = 'rgb(8,255,66)'
        area = 'rTrimCircle'
        break
      case 4:
        lIslnValveStyle.color = 'rgb(8,255,66)'
        area = 'lIslnCircle'
        break
      case 5:
        cIslnValveStyle.color = 'rgb(8,255,66)'
        area = 'cIslnCircle'
        break
      case 6:
        rIslnValveStyle.color = 'rgb(8,255,66)'
        area = 'rIslnCircle'
        break
      case 7:
        lEngStyle.color = 'rgb(8,255,66)'
        area = 'engine1BleedCircle'
        break
      case 8:
        rEngStyle.color = 'rgb(8,255,66)'
        area = 'engine2BleedCircle'
        break
      case 9:
        apuStyle.color = 'rgb(8,255,66)'
        area = 'apuBleedCircle'
        break
      case 10:
        lWaiStyle.color = 'rgb(8,255,66)'
        area = 'lWingAnticeCircle'
        break
      case 11:
        rWaiStyle.color = 'rgb(8,255,66)'
        area = 'rWingAnticeCircle'
        break
      case 12:
        lEaiStyle.color = 'rgb(8,255,66)'
        area = 'engine1AnticeCircle'
        break
      case 13:
        rEaiStyle.color = 'rgb(8,255,66)'
        area = 'engine2AnticeCircle'
        break
      case 14:
        lStartStyle.color = 'rgb(8,255,66)'
        area = 'lStartValveCircle'
        break
      case 15:
        rStartStyle.color = 'rgb(8,255,66)'
        area = 'rStartValveCircle'
        break
      default:
        break
    }
  } else {
    switch (area) {
      case 'lPackRunWay':
        lPackValveStyle.color = 'rgb(8,214,255)'
        break
      case 'rPackRunWay':
        rPackValveStyle.color = 'rgb(8,214,255)'
        break
      case 'lTrimCircle':
        lTrimValveStyle.color = 'rgb(8,214,255)'
        break
      case 'rTrimCircle':
        rTrimValveStyle.color = 'rgb(8,214,255)'
        break
      case 'lIslnCircle':
        lIslnValveStyle.color = 'rgb(8,214,255)'
        break
      case 'cIslnCircle':
        cIslnValveStyle.color = 'rgb(8,214,255)'
        break
      case 'rIslnCircle':
        rIslnValveStyle.color = 'rgb(8,214,255)'
        break
      case 'engine1BleedCircle':
        lEngStyle.color = 'rgb(8,214,255)'
        break
      case 'engine2BleedCircle':
        rEngStyle.color = 'rgb(8,214,255)'
        break
      case 'apuBleedCircle':
        apuStyle.color = 'rgb(8,214,255)'
        break
      case 'lWingAnticeCircle':
        lWaiStyle.color = 'rgb(8,214,255)'
        break
      case 'rWingAnticeCircle':
        rWaiStyle.color = 'rgb(8,214,255)'
        break
      case 'engine1AnticeCircle':
        lEaiStyle.color = 'rgb(8,214,255)'
        break
      case 'engine2AnticeCircle':
        rEaiStyle.color = 'rgb(8,214,255)'
        break
      case 'lStartValveCircle':
        lStartStyle.color = 'rgb(8,214,255)'
        break
      case 'rStartValveCircle':
        rStartStyle.color = 'rgb(8,214,255)'
        break
      default:
        break
    }
    document.body.style.cursor = 'default'
    area = null
  }
}

const clickThisArea = () => {
  if (area) {
    switch (area) {
      case 'lPackRunWay':
        store.dispatch('preumatic/toggleLPackValve')
        break
      case 'rPackRunWay':
        store.dispatch('preumatic/toggleRPackValve')
        break
      case 'lTrimCircle':
        store.dispatch('preumatic/toggleLTrimValve')
        break
      case 'rTrimCircle':
        store.dispatch('preumatic/toggleRTrimValve')
        break
      case 'lIslnCircle':
        store.dispatch('preumatic/toggleLIslnValve')
        break
      case 'cIslnCircle':
        store.dispatch('preumatic/toggleCIslnValve')
        break
      case 'rIslnCircle':
        store.dispatch('preumatic/toggleRIslnValve')
        break
      case 'engine1BleedCircle':
        store.dispatch('preumatic/toggleEngine1BleedValve')
        break
      case 'engine2BleedCircle':
        store.dispatch('preumatic/toggleEngine2BleedValve')
        break
      case 'apuBleedCircle':
        store.dispatch('preumatic/toggleApuBleedValve')
        break
      case 'lWingAnticeCircle':
        store.dispatch('preumatic/toggleLWingAnticeIceValve')
        break
      case 'rWingAnticeCircle':
        store.dispatch('preumatic/toggleRWingAnticeIceValve')
        break
      case 'engine1AnticeCircle':
        store.dispatch('preumatic/toggleEngine1AnticeValve')
        break
      case 'engine2AnticeCircle':
        store.dispatch('preumatic/toggleEngine2AnticeValve')
        break
      case 'lStartValveCircle':
        store.dispatch('preumatic/toggleLStartValve')
        break
      case 'rStartValveCircle':
        store.dispatch('preumatic/toggleRStartValve')
        break
      default:
        break
    }
  }
}

let lPackRunWay = null
let rPackRunWay = null
let lTrimCircle = null
let rTrimCircle = null
let lPackTriangle = null
let rPackTriangle = null
let lIslnCircle = null
let rIslnCircle = null
let cIslnCircle = null
let engine1BleedCircle = null
let engine2BleedCircle = null
let engine1BleedPath = null
let engine2BleedPath = null
let apuBleedCircle = null

// 3个隔离活门都打开
const islnOpen = computed(() => lIslnValve.value && rIslnValve.value && cIslnValve.value)

//左系统用户需要使用引气
const leftUserUsing = computed(
  () => lWingAnticeIceValve.value || lPackValve.value || lStartValve.value
)

// 右系统用户需要使用引气
const rightUserUsing = computed(
  () => rWingAnticeIceValve.value || rPackValve.value || rStartValve.value
)

// 1发引气被使用
const engine1Used = computed(
  () => engine1CanBeUsed.value && ((rightUserUsing.value && islnOpen.value) || leftUserUsing.value)
)

// 2发引气被使用
const engine2Used = computed(
  () => engine2CanBeUsed.value && ((leftUserUsing.value && islnOpen.value) || rightUserUsing.value)
)

// apu引气被使用
const apuUsed = computed(() => {
  if (apuCanBeUsed.value) {
    if (
      (lIslnValve.value && leftUserUsing.value) ||
      (cIslnValve.value && rIslnValve.value && rightUserUsing.value)
    ) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
})

//1发引气可以被使用
const engine1CanBeUsed = computed(() => engine1BleedValve.value && engine1Run.value)

//2发引气可以被使用
const engine2CanBeUsed = computed(() => engine2BleedValve.value && engine2Run.value)

//apu 引气可以被使用
const apuCanBeUsed = computed(() => apuBleedValve.value && apuRun.value)

/**
 * 1. 发动机1引气活门打开且一发启动
 * 2. 发动机2引气活门打开且二发启动，3个隔离活门都打开
 * 3. APU引气活门打开，左隔离活门打开
 * 这3种情况，如果左空调开关打开，则启动左空调
 */
const flowToLeft = computed(
  () =>
    lPackValve.value &&
    (engine1Used.value || engine2Used.value || (apuCanBeUsed.value && lIslnValve.value))
)

/**
 * 1. 发动机2引气活门打开且二发启动
 * 2. 发动机1引气活门打开且一发启动，3个隔离活门都打开
 * 3. APU引气活门打开，中和左隔离活门都打开
 * 这3种情况，如果右空调开关打开，则启动右空调
 */
const flowToRight = computed(
  () =>
    rPackValve.value &&
    (engine2Used.value ||
      engine1Used.value ||
      (apuCanBeUsed.value && rIslnValve.value && cIslnValve.value))
)

const drawMyRunWay = () => {
  lPackRunWay = drawRunWay(154, 48, canvas, lPackRunWay, lPackValve.value)
  rPackRunWay = drawRunWay(474, 48, canvas, rPackRunWay, rPackValve.value)
}

const drawTrimValve = () => {
  //画左配平活门
  lTrimCircle = drawCircle(
    240,
    48,
    canvas,
    lTrimValve.value ? 'ON' : 'OFF',
    lTrimCircle,
    'vertical',
    'normal'
  )

  //画右配平活门
  rTrimCircle = drawCircle(
    385,
    48,
    canvas,
    rTrimValve.value ? 'ON' : 'OFF',
    rTrimCircle,
    'vertical',
    'normal'
  )
}

const drawIslnValve = () => {
  //画左隔离活门
  lIslnCircle = drawCircle(
    220,
    123,
    canvas,
    lIslnValve.value ? 'ON' : 'OFF',
    lIslnCircle,
    'horizontal',
    'normal'
  )

  //画中和隔离活门
  cIslnCircle = drawCircle(
    320,
    123,
    canvas,
    cIslnValve.value ? 'ON' : 'OFF',
    cIslnCircle,
    'horizontal',
    'normal'
  )

  //画右隔离活门
  rIslnCircle = drawCircle(
    420,
    123,
    canvas,
    rIslnValve.value ? 'ON' : 'OFF',
    rIslnCircle,
    'horizontal',
    'normal'
  )
}

const drawEngineValve = () => {
  //画1发引气活门
  engine1BleedCircle = drawCircle(
    69,
    268,
    canvas,
    engine1BleedValve.value ? 'ON' : 'OFF',
    engine1BleedCircle,
    'horizontal',
    'small'
  )

  //画2发引气活门
  engine2BleedCircle = drawCircle(
    564,
    268,
    canvas,
    engine2BleedValve.value ? 'ON' : 'OFF',
    engine2BleedCircle,
    'horizontal',
    'small'
  )
}

const drawApuValve = () => {
  //画APU引气活门
  apuBleedCircle = drawCircle(
    281.5,
    200,
    canvas,
    apuBleedValve.value ? 'ON' : 'OFF',
    apuBleedCircle,
    'vertical',
    'small'
  )
}

let canvas = null
let lWingAnticeLine = null
let rWingAnticeLine = null
let lWingAnticeCircle = null
let rWingAnticeCircle = null

const drawAntice = () => {
  canvas.remove(lWingAnticeLine)
  canvas.remove(rWingAnticeLine)
  canvas.remove(engine1AnticePath)
  canvas.remove(engine2AnticePath)
  //画左机翼防冰活门管路
  if (
    lWingAnticeIceValve.value &&
    (engine1CanBeUsed.value ||
      (engine2CanBeUsed.value && islnOpen.value) ||
      (apuCanBeUsed.value && lIslnValve.value))
  ) {
    lWingAnticeLine = new fabric.Line([154, 164, 78, 164], {
      stroke: 'rgb(8,255,66)',
      strokeWidth: 10,
      strokeDashArray: []
    })
    //画左机翼防冰活门箭头
    lWingAnticeIceTriangle = drawTriangle(
      80,
      179,
      canvas,
      'left',
      lWingAnticeIceTriangle,
      true,
      'normal'
    )
  } else {
    lWingAnticeLine = new fabric.Line([154, 168, 80, 168], {
      stroke: 'white',
      strokeWidth: 2,
      strokeDashArray: [21, 32]
    })
    //画左机翼防冰活门箭头
    lWingAnticeIceTriangle = drawTriangle(
      80,
      179,
      canvas,
      'left',
      lWingAnticeIceTriangle,
      false,
      'normal'
    )
  }
  canvas.add(lWingAnticeLine)
  //画左机翼防冰活门
  lWingAnticeCircle = drawCircle(
    120,
    172,
    canvas,
    lWingAnticeIceValve.value ? 'ON' : 'OFF',
    lWingAnticeCircle,
    'horizontal',
    'small'
  )

  //画右机翼防冰管路
  if (
    rWingAnticeIceValve.value &&
    (engine2CanBeUsed.value ||
      (engine1CanBeUsed.value && islnOpen.value) ||
      (apuCanBeUsed.value && rIslnValve.value))
  ) {
    rWingAnticeLine = new fabric.Line([474, 164, 550, 164], {
      stroke: 'rgb(8,255,66)',
      strokeWidth: 10,
      strokeDashArray: []
    })
    //画右机翼防冰活门箭头
    rWingAnticeIceTriangle = drawTriangle(
      570,
      180,
      canvas,
      'right',
      rWingAnticeIceTriangle,
      true,
      'normal'
    )
  } else {
    rWingAnticeLine = new fabric.Line([474, 168, 549, 168], {
      stroke: 'white',
      strokeWidth: 2,
      strokeDashArray: [20, 33, 24]
    })
    //画右机翼防冰活门箭头
    rWingAnticeIceTriangle = drawTriangle(
      570,
      180,
      canvas,
      'right',
      rWingAnticeIceTriangle,
      false,
      'normal'
    )
  }
  canvas.add(rWingAnticeLine)
  //画右机翼防冰活门
  rWingAnticeCircle = drawCircle(
    514,
    172,
    canvas,
    rWingAnticeIceValve.value ? 'ON' : 'OFF',
    rWingAnticeCircle,
    'horizontal',
    'small'
  )
  //画左发动机防冰活门
  engine1AnticeCircle = drawCircle(
    25,
    262,
    canvas,
    engine1AnticeValve.value ? 'ON' : 'OFF',
    engine1AnticeCircle,
    'vertical',
    'little'
  )
  if (engine1Run.value && engine1AnticeValve.value) {
    engine1AnticePath = new fabric.Path(
      `
    M 40 282
    h -16
    q -5 0 -5 -5
    v -36
    q 0 -5 5 -5
    h 7
    `,
      { stroke: 'rgb(8,255,66)', strokeWidth: 10, fill: '' }
    )
    engine1AnticeTriangle = drawTriangle(
      45,
      241,
      canvas,
      'right',
      engine1AnticeTriangle,
      true,
      'small'
    )
  } else {
    engine1AnticePath = new fabric.Path(
      `
    M 40 282
    h -16
    q -5 0 -5 -5
    v -7
    M 19 246
    v -5
    q 0 -5 5 -5
    h 7
    `,
      { stroke: 'white', strokeWidth: 2, fill: '' }
    )
    engine1AnticeTriangle = drawTriangle(
      45,
      241,
      canvas,
      'right',
      engine1AnticeTriangle,
      false,
      'small'
    )
  }
  canvas.add(engine1AnticePath)

  //画右发动机防冰活门
  engine2AnticeCircle = drawCircle(
    616,
    262,
    canvas,
    engine2AnticeValve.value ? 'ON' : 'OFF',
    engine2AnticeCircle,
    'vertical',
    'little'
  )
  if (engine2Run.value && engine2AnticeValve.value) {
    engine2AnticePath = new fabric.Path(
      `
    M 586 282
    h 19
    q 5 0 5 -5
    v -36
    q 0 -5 -5 -5
    h -9
    `,
      { stroke: 'rgb(8,255,66)', strokeWidth: 10, fill: '' }
    )
    engine2AnticeTriangle = drawTriangle(
      601,
      241,
      canvas,
      'left',
      engine2AnticeTriangle,
      true,
      'small'
    )
  } else {
    engine2AnticePath = new fabric.Path(
      `
    M 586 282
    h 19
    q 5 0 5 -5
    v -7
    M 610 244
    v -5
    q 0 -5 -5 -5
    h -9
    `,
      { stroke: 'white', strokeWidth: 2, fill: '' }
    )
    engine2AnticeTriangle = drawTriangle(
      601,
      239,
      canvas,
      'left',
      engine2AnticeTriangle,
      false,
      'small'
    )
  }
  canvas.add(engine2AnticePath)
}

let engine1AnticeCircle = null
let engine2AnticeCircle = null
let engine1AnticeTriangle = null
let engine2AnticeTriangle = null
let engine1AnticePath = null
let engine2AnticePath = null

const drawCanvas = () => {
  const canvasRefrence = canvasRef.value
  if (canvasRefrence.getContext) {
    const ctx = canvasRefrence.getContext('2d')
    //清除旧的图画
    ctx.clearRect(0, 0, canvasRefrence.width, canvasRefrence.height)
    canvas = new fabric.Canvas('canvasc')
    canvas.clear()
    drawMyRunWay()

    drawTrimValve()

    drawIslnValve()

    drawEngineValve()

    drawStartValve()

    drawAntice()

    drawApuValve()

    drawApu()
  }
}

let islnLine = null
let lPackPath = null
let rPackPath = null
let lTrimPath = null
let rTrimPath = null
let lTrimTriangle = null
let rTrimTriangle = null
let lWingAnticeIceTriangle = null
let rWingAnticeIceTriangle = null
let apuBleedLine = null
let apuStartCircle = null
let apuStartTriangle = null
let c1AirPumpLine = null
let c1AirPumpTriangle = null
let c2AirPumpLine = null
let c2AirPumpTriangle = null
let lStartValveCircle = null
let rStartValveCircle = null
let lStartPath = null
let rStartPath = null
let lStartTriangle = null
let rStartTriangle = null

const lStartValve = computed(() => store.state.preumatic.lStartValve)
const rStartValve = computed(() => store.state.preumatic.rStartValve)

const drawStartValve = () => {
  //画左起动机活门
  lStartValveCircle = drawCircle(
    127,
    304,
    canvas,
    lStartValve.value ? 'ON' : 'OFF',
    lStartValveCircle,
    'horizontal',
    'little'
  )

  //如果2号发动机可以被使用，且隔离活门打开，且2号发动机引气活门打开
  if ((engine2CanBeUsed.value && islnOpen.value) || (apuCanBeUsed.value && lIslnValve.value)) {
    lStartPath = new fabric.Path(
      `
    M 153 266
    v 27
    q 0 5 -5 5
    h -52
    `,
      { stroke: 'rgb(8,255,66)', strokeWidth: 10, fill: '' }
    )
    lStartTriangle = drawTriangle(100, 303, canvas, 'left', lStartTriangle, true, 'small')
    canvas.add(lStartPath)
  } else {
    lStartPath = new fabric.Path(
      `
    M 153 266
    v 27
    q 0 5 -5 5
    h -14
    M 107 298
    h -10
    `,
      { stroke: 'white', strokeWidth: 2, fill: '' }
    )
    canvas.add(lStartPath)
    lStartTriangle = drawTriangle(100, 303, canvas, 'left', lStartTriangle, false, 'small')
  }

  //画右起动机活门
  rStartValveCircle = drawCircle(
    510,
    304,
    canvas,
    rStartValve.value ? 'ON' : 'OFF',
    rStartValveCircle,
    'horizontal',
    'little'
  )
  if (
    (engine1CanBeUsed.value && islnOpen.value) ||
    (apuCanBeUsed.value && cIslnValve.value && rIslnValve.value)
  ) {
    rStartPath = new fabric.Path(
      `
    M 474 266
    v 27
    q 0 5 5 5
    h 54
    `,
      { stroke: 'rgb(8,255,66)', strokeWidth: 10, fill: '' }
    )
    rStartTriangle = drawTriangle(546, 303, canvas, 'right', rStartTriangle, true, 'small')
  } else {
    rStartPath = new fabric.Path(
      `
    M 474 266
    v 27
    q 0 5 5 5
    h 14
    M 516 298
    h 14
    `,
      { stroke: 'white', strokeWidth: 2, fill: '' }
    )
    rStartTriangle = drawTriangle(545, 303, canvas, 'right', rStartTriangle, false, 'small')
  }
  canvas.add(rStartPath)
}

const drawPath = () => {
  // 保存返回的path对象
  //画发动机气路
  engine1BleedPath = drawEngineBleedPath(93, 265, canvas, engine1BleedPath, engine1Used.value, 1)
  engine2BleedPath = drawEngineBleedPath(534, 265, canvas, engine2BleedPath, engine2Used.value, 2)

  canvas.remove(islnLine)
  //画隔离活门气路
  if (!apuCanBeUsed.value) {
    if (
      (leftUserUsing.value && !engine1CanBeUsed.value && engine2CanBeUsed.value) ||
      (rightUserUsing.value && !engine2CanBeUsed.value && engine1CanBeUsed.value)
    ) {
      islnLine = drawIslnLine(148, 118, 327, canvas, islnLine, true)
    } else {
      islnLine = drawIslnLine(158, 123, 327, canvas, islnLine, false)
    }
  } else {
    console.log('apuCanBeUsed.value', apuCanBeUsed.value)
  }

  //画空调系统气路
  if (
    lPackValve.value &&
    ((engine1CanBeUsed.value && engine1Run.value) ||
      (engine2CanBeUsed.value && islnOpen.value) ||
      (apuCanBeUsed.value && apuRun.value && lIslnValve.value))
  ) {
    lPackPath = drawPackPath(153, 123, canvas, lPackPath, true)
    lPackTriangle = drawTriangle(164, 21, canvas, 'top', lPackTriangle, true, 'normal')
    lTrimPath = drawLShape(153, 83, canvas, lTrimPath, lTrimValve.value, 'left')
    lTrimTriangle = drawTriangle(252, 21, canvas, 'top', lTrimTriangle, lTrimValve.value, 'normal')
  } else {
    lPackPath = drawPackPath(153, 123, canvas, lPackPath, false)
    lTrimPath = drawLShape(153, 83, canvas, lTrimPath, false, 'left')
    lPackTriangle = drawTriangle(164, 21, canvas, 'top', lPackTriangle, false, 'normal')
    lTrimTriangle = drawTriangle(252, 21, canvas, 'top', lTrimTriangle, false, 'normal')
  }

  if (
    rPackValve.value &&
    ((engine2CanBeUsed.value && engine2Run.value) ||
      (engine1CanBeUsed.value && islnOpen.value) ||
      (apuCanBeUsed.value && apuRun.value && rIslnValve.value && cIslnValve.value))
  ) {
    rPackPath = drawPackPath(474, 123, canvas, rPackPath, true)
    rTrimPath = drawLShape(474, 83, canvas, rTrimPath, rTrimValve.value, 'right')
    rTrimTriangle = drawTriangle(397, 21, canvas, 'top', rTrimTriangle, rTrimValve.value, 'normal')
    rPackTriangle = drawTriangle(485, 21, canvas, 'top', rPackTriangle, true, 'normal')
  } else {
    rPackPath = drawPackPath(474, 123, canvas, rPackPath, false)
    rTrimPath = drawLShape(474, 83, canvas, rTrimPath, false, 'right')
    rPackTriangle = drawTriangle(485, 21, canvas, 'top', rPackTriangle, false, 'normal')
    rTrimTriangle = drawTriangle(396, 21, canvas, 'top', rTrimTriangle, false, 'normal')
  }

  let apuPress = false //apu是否供气，用于后面画apu起动机气路使用
  //画APU气路
  if (
    apuBleedValve.value &&
    apuRun.value &&
    ((lIslnValve.value && leftUserUsing.value) || (rIslnValve.value && rightUserUsing.value))
  ) {
    apuBleedLine = drawVerticalLine(277, 300, 170, canvas, apuBleedLine, true, 'upper')
    apuPress = true
  } else {
    apuBleedLine = drawVerticalLine(277, 250, 125, canvas, apuBleedLine, false, 'upper')
    apuPress = false
  }

  //画apu起动机
  apuStartCircle = drawCircle(340, 258, canvas, 'BLANK', apuStartCircle, 'vertical', 'small')

  //画APU起动机气路todo 这条气路暂时没看明白是干啥用的
  const path = new fabric.Path(
    `
  M 278 230
  h 54
  q 5 0 5 5
  v 5
  M 337 270
  v 8
  q 0 5 -5 5
  h -8
  `,
    {
      stroke: 'white',
      strokeWidth: 2,
      fill: ''
    }
  )
  canvas.add(path)

  apuStartTriangle = drawTriangle(324, 293, canvas, 'left', apuStartTriangle, false, 'normal')

  //画C1 空气泵和C2 空气泵
  drawAirPump()
}

const drawAirPump = () => {
  //画AIR C1 PUMP
  if (
    apuCanBeUsed.value ||
    (engine1CanBeUsed.value && lIslnValve.value) ||
    (engine2CanBeUsed.value && cIslnValve.value && rIslnValve.value)
  ) {
    c1AirPumpTriangle = drawTriangle(257, 170, canvas, 'left', c1AirPumpTriangle, true, 'normal')
    c1AirPumpLine = drawHorizontalLine(277, 159, 22, canvas, c1AirPumpLine, true, 'left')
    // drawHorizontalLine(ctx, 257, 170, -20, 10, 'rgb(8,255,66)')
  } else {
    c1AirPumpTriangle = drawTriangle(257, 170, canvas, 'left', c1AirPumpTriangle, false, 'normal')
    c1AirPumpLine = drawHorizontalLine(277, 159, 22, canvas, c1AirPumpLine, false, 'left')
    // drawHorizontalLine(ctx, 240, 120, -20, 2, 'white')
  }

  // 画AIR C2 PUMP

  if (
    (apuCanBeUsed.value && cIslnValve.value) ||
    (engine1CanBeUsed.value && lIslnValve.value && cIslnValve.value) ||
    (engine2CanBeUsed.value && rIslnValve.value)
  ) {
    c2AirPumpLine = new fabric.Path(
      `
    M 365 127
    v 50
    q 0 5 5 5
    h 20
    `,
      {
        stroke: 'rgb(8,255,66)',
        strokeWidth: 10,
        fill: ''
      }
    )
    c2AirPumpTriangle = drawTriangle(411, 192, canvas, 'right', c2AirPumpTriangle, true, 'normal')
    canvas.add(c2AirPumpLine)
  } else {
    c2AirPumpLine = new fabric.Path(
      `
    M 365 127
    v 50
    q 0 5 5 5
    h 20
    `,
      {
        stroke: 'white',
        strokeWidth: 2,
        fill: ''
      }
    )
    c2AirPumpTriangle = drawTriangle(412, 192, canvas, 'right', c2AirPumpTriangle, false, 'normal')
    canvas.add(c2AirPumpLine)
  }
}
</script>

<style scoped>
.AirSys {
  width: 634px;
  height: 343px;
  position: relative;
  z-index: 3;
}

.top {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.header {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: flex;
  top: 82px;
}

.header_lower {
  position: absolute;
  z-index: 4;
  top: 150px;
  display: flex;
}

.footer {
  position: absolute;
  z-index: 4;
  top: 200px;
  display: flex;
}

.footer_lower {
  position: absolute;
  z-index: 4;
  top: 280px;
  height: 50px;
  display: flex;
}

#canvasc {
  position: absolute;
  margin-left: 2px;
  z-index: -1;
}

.disc_font {
  font-weight: 600;
  display: block;
  color: rgb(8, 214, 255);
}

.duct_box {
  border: 3px solid white;
  border-radius: 10px;
  width: 50px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
}
</style>
